<template>
  <div class="tw-moblie-select-top">
    <van-tabs
      v-model="activeName"
      :title-active-color="activeTextColor"
      :title-inactive-color="inactiveTextColor"
      :background="tabsBackgroundColor"
      @click="clickTabName"
      @change="changeTab"
      @disabled="clickDisabled"
      :ellipsis="ellipsisText">
      <van-tab
        ref="tabtest"
        :dot="tab.dot"
        :disabled="tab.disabled"
        :title-style="{height: '30px', fontSize: tabFontSize}"
        v-for="tab in tabPropertiesList" :title="tab.tabName" :key="tab.tabId">
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import props from './props'
import Vue from 'vue'
import { Tab, Tabs, Toast } from 'vant'
import 'vant/lib/index.css'

Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Toast)
export default {
  name: 'lib-name',
  props,
  data() {
    return {
    }
  },

  watch: {
    // activeBackgroundColor: {
    //   handler(newValue, oldValue) {
    //     this.$set(this.$refs.tabtest.filter(item => item.isActive)[0].titleStyle, 'backgroundColor', newValue)
    //     this.$forceUpdate()
    //     // this.$refs.tabtest.filter(item => item.isActive)[0].titleStyle.backgroundColor = newValue
    //   }
    // }
  },

  computed: {
    // activeName () {
    //   return this.activeName - 1
    // }
  },

  methods: {
    clickTabName () {
      console.log(this._uid)
      this.$refs.tabtest.forEach(item => {
        if (item.isActive) {
          // this.$nextTick(() => {
          //   this.$set(item.titleStyle, 'backgroundColor', this.activeBackgroundColor)
          // })
          this.$set(item.titleStyle, 'backgroundColor', this.activeBackgroundColor)
        } else {
          item.titleStyle.backgroundColor = ''
        }
        if (item.disabled) {
          this.$nextTick(() => {
            this.$set(item.titleStyle, 'color', this.disabledTextColor)
          })
        }
      })
    },

    clickDisabled () {
      if (this.disabledMsg) {
        Toast(this.disabledMsg)
      }
    },

    changeTab (tabId) {
      this.$emit('changeTab', tabId)
    }
  },

  mounted () {
    window.czh = this
    this.$nextTick(() => {
      this.clickTabName()
    })
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
